<template>
    <div class="login">
        <a href="https://tianzhongli.shop" target="_blank">>>去官网</a>
        <div class="container">
            <el-card shadow="hover">
                <div class="title">
                    <el-text>田中笠后台管理系统</el-text>
                </div>
                <div class="form">
                    <el-form
                        status-icon
                        :model="data.form"
                        :rules="data.formRules"
                    >
                        <el-form-item prop="username">
                            <el-input
                                v-model.trim="data.form.username"
                                placeholder="请输入管理员账号"
                                autocomplete="off"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                type="password"
                                v-model.trim="data.form.password"
                                placeholder="请输入密码"
                                autocomplete="off"
                                show-password
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                type="primary"
                                @click="onSubmit(data.form)"
                                style="color: aliceblue"
                                color="rgb(220,170,91)"
                                >登录</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
                <el-button @click="writeTest">点击使用测试账号</el-button>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import 'element-plus/theme-chalk/el-notification.css'
import md5 from 'js-md5'
import { ElMessage } from 'element-plus'
import { adminAccountLogin } from '@/apis/admin'
import { validateEmailOrTelephone, validatePassword } from '@/utils/validate'
import { watch, reactive, ref, onMounted, h } from 'vue'
import { adminStore } from '@/stores/admin'
import { ElNotification } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const useAdminStore = adminStore()

// 用户名校验
const validateNameRules = (rule, value, callback) => {
    let regEmailOrTelephone = validateEmailOrTelephone(value)
    if (value === '') {
        callback(new Error('请输入正确管理员账号'))
    } else if (!regEmailOrTelephone) {
        callback(new Error('请输入正确管理员账号'))
    } else {
        callback()
    }
}

// 登录表单数据
const data = reactive({
    form: { username: '', password: '' },
    formRules: {
        username: [{ validator: validateNameRules, trigger: 'change' }],
        password: [
            { required: true, message: '请输入密码', trigger: 'change' },
        ],
    },
})

// 使用测试账号
const writeTest = () => {
    data.form.username = 'admin@199.com'
    data.form.password = 'admin199'
}

const onSubmit = formData => {
    const username = formData.username
    const password = formData.password
    // 校验用户名
    if (!validateEmailOrTelephone(username)) {
        ElNotification({
            title: '提示',
            message: '管理员账号格式不正确',
            type: 'warning',
        })
        return false
    }
    // 校验密码
    if (!validatePassword(password)) {
        ElNotification({
            title: '提示',
            message: '登录密码错误，请重试',
            type: 'warning',
        })
        return false
    }
    // 最后提交到后端
    adminAccountLogin({ username, password: md5(password) })
        .then(res => {
            //    登录成功之后 存token 提示  跳转
            const {
                id,
                username,
                avatar,
                token,
                mobile,
                nickname,
                gender,
                occupation,
                birthday,
            } = res
            useAdminStore.setAdmin({
                id,
                username,
                avatar,
                token,
                mobile,
                nickname,
                gender,
                occupation,
                birthday,
            })
            ElMessage({
                type: 'success',
                message: '登录成功！',
            })
            router.push(route.query.redirectUrl || '/')
        })
        .catch(err => {
            console.log(err)
            ElMessage({
                showClose: true,
                message: err.response.data.msg,
                type: 'error',
            })
        })
}
</script>

<style lang="scss" scoped>
.login {
    height: 100vh;
    background: url(https://img.tianzhongli.shop/i/2023/03/18/天空-麦场.webp)
        no-repeat;
    overflow: hidden;
    background-size: cover;
    position: relative;
    .container {
        width: 100%;
        height: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        .title {
            margin-top: 50px;
            > span {
                font-size: 34px;
                user-select: none;
                color: rgb(18, 30, 63);
            }
        }
        .el-card {
            --el-color-primary: #da9233;
            width: 600px;
            height: 450px;
            opacity: 0.9;

            .el-form {
                width: 100%;
                display: flex;
                flex-direction: column;
                margin-top: 20px;
                justify-content: center;

                .el-form-item {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 50px;
                    .el-input {
                        height: 50px;
                        font-size: 20px;
                        width: 90%;
                    }
                    .el-button {
                        font-size: 20px;
                        width: 90%;
                        height: 50px;
                    }
                }
            }
        }
    }
}
a {
    position: absolute;
    font-size: 18px;
    color: #d5ebe1;
    cursor: pointer;
    text-decoration: underline;
}
</style>
